/*
 * @Description:
 * @Date: 2023-11-01 08:59:53
 * @LastEditTime: 2023-11-07 16:23:51
 */
/**
 * @descripion:
 * @param {Viewer} viewer
 * @param {Cartesian2} position
 * @param {String} title
 * @param {String} id
 * @return {*}
 */

// import Vue from 'vue';
// import Label from './index.vue';
// let WindowVm = Vue.extend(Label);
import * as Cesium from 'cesium';
import { createApp, h } from 'vue';
import popUp from '../pages/map/component/popUp.vue';

export default class Bubble {
	constructor(val) {
		this.viewer = val.viewer;
		//  this.height = val.height;
		this.position = val.position._value;
		let title = val.monitoItems.data.name;
		let state = val.monitoItems.data.state;
		let id = val.id;
		const app = createApp({
			render() {
				return h(popUp, {
					title,
					state,
					id
				});
			}
		});
		const parent = document.createElement('div');
		this.vmInstance = app.mount(parent);

		val.viewer.cesiumWidget.container.appendChild(this.vmInstance.$el);
		this.vmInstance.closeEvent = e => {
			this.windowClose();
		};
		this.addPostRender();
	}

	//添加场景事件
	addPostRender() {
		this.viewer.scene.postRender.addEventListener(this.postRender, this);
	}

	//场景渲染事件 实时更新窗口的位置 使其与笛卡尔坐标一致
	postRender() {
		debugger;
		if (!this.vmInstance.$el || !this.vmInstance.$el.style) return;
		const canvasHeight = this.viewer.scene.canvas.height;
		const windowPosition = new Cesium.Cartesian2();
		Cesium.SceneTransforms.wgs84ToWindowCoordinates(this.viewer.scene, this.position, windowPosition);
		this.vmInstance.$el.style.bottom = canvasHeight - windowPosition.y + 260 + 'px';
		const elWidth = this.vmInstance.$el.offsetWidth;
		this.vmInstance.$el.style.left = windowPosition.x - elWidth / 2 + 110 + 'px';

		const camerPosition = this.viewer.camera.position;
		let height = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(camerPosition).height;
		height += this.viewer.scene.globe.ellipsoid.maximumRadius;
		if (
			!(Cesium.Cartesian3.distance(camerPosition, this.position) > height) &&
			this.viewer.camera.positionCartographic.height < 50000000
		) {
			this.vmInstance.$el.style.display = 'block';
		} else {
			this.vmInstance.$el.style.display = 'none';
		}
	}
	//关闭
	windowClose() {
		if (this.vmInstance) {
			this.vmInstance.$el.remove();
			// debugger;
			// this.vmInstance.unmount();
		}
		//this.vmInstance.$el.style.display = "none"; //删除dom
		this.viewer.scene.postRender.removeEventListener(this.postRender, this); //移除事件监听
	}
}
